<template>
  <div>
    <li
      class="list-group-item d-flex align-items-center"
      :class="{'active':active}"
      style="cursor: pointer;padding: 5px 10px;border: none; border-bottom: 1px solid rgba(0,0,0,.125);"
      @click.stop="$emit('change',index)"
    >
      {{item.name}}
      <el-dropdown
        class="ml-auto"
        trigger="click"
      >
        <span
          class="btn btn-light btn-sm border"
          style="padding:5px 13px"
        >
          {{item.num}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item @click.stop.native="$emit('edit',{item,index})">修改</el-dropdown-item>
          <el-dropdown-item @click.stop.native="$emit('del',index)">删除</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </li>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false
    },
    item: Object,
    index: Number
  },
  methods: {
    albumChange(index) {
      this.$emit("change", index);
    }
  }
};
</script> 